<template>
  <div class="home-page">
    <!-- 图片部分 -->
    <div class="admin animate__animated animate__bounceInDown" style="display: flex;">
      <div class="admin-header suspension">
        <img class="welcome-img " src="@/assets/images/logo6.png" alt="">
        <div class="welcome-text">
          <div  class="welcome-title">Admin，下午好！欢迎回来！</div>
        </div>

      </div>
      <div class="admin_img suspension" style="margin-left: 10px;">
        <img style="width:180px;height: 130px;" src="@/assets/images/1.png" />
      </div>
    </div>

    <!-- 客户数据部分 -->
    <div style="display: flex;" class="animate__animated animate__bounceInDown">

      <div class="content" style="padding-right: 10px; padding-left: 4px;">
        <div class="small-panel suspension">
          <div class="small-panel-title">总销售额</div>
          <div class="small-panel-content">
            <div style="display: flex;text-align: center;">
              <i class="iconfont icon-consumption" style="font-size: 28px; color: rgb(133, 149, 244);">
              </i>
              <div style=""><span style="font-size: 28px;">{{ data.request.totalprice }} (元)</span></div>
            </div>
          </div>
        </div>
      </div>
      <div class="content" style="padding-right: 10px; padding-left: 4px;">
        <div class="small-panel suspension">
          <div class="small-panel-title">今日销售额</div>
          <div class="small-panel-content">
            <div style="display: flex;text-align: center;">
              <i class=" iconfont icon-dangrixiaoshoue" style="font-size: 28px; color: rgb(133, 149, 244);">
              </i>
              <div style=""><span style="font-size: 28px;">{{ data.request.todayprice }}(元)</span></div>
            </div>
          </div>
        </div>
      </div>
      <div class="content" style="padding-right: 10px; padding-left: 4px;">
        <div class="small-panel suspension">
          <div class="small-panel-title">会员总数</div>
          <div class="small-panel-content">
            <div style="display: flex;text-align: center;">
              <i class=" iconfont icon-yuangong" style="font-size: 28px; color: rgb(133, 149, 244);">
              </i>
              <div style=""><span style="font-size: 28px;">{{ data.request.vipcount }}(人)</span></div>
            </div>
          </div>
        </div>
      </div>
      <div class="content " style="padding-right: 10px; padding-left: 4px;">
        <div class="small-panel suspension">
          <div class="small-panel-title">今日新增会员</div>
          <div class="small-panel-content">
            <div style="display: flex;text-align: center;">
              <i class="fa fa-line-chart iconfont icon-shangsheng" style="font-size: 28px; color: rgb(133, 149, 244);">
              </i>
              <div style=""><span style="font-size: 28px;">{{ data.request.todayvip }}(人)</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 统计数据部分 -->


    <div class="home-content animate__animated animate__bounceInLeft">
      <div class="content-left suspension " style="margin-right: 28px;">
        <div class="home-title">最近一周会员增长情况</div>
        <div class="home-echarts">
          <div ref="vipchar" style="width: 400px; height: 400px; padding-left: 50px;">
          </div>
        </div>
      </div>

      <div class="content-left suspension " style="margin-right: 28px;">
        <div class="home-title">套餐销量情况</div>
        <div class="home-echarts">
          <div ref="packchar" style="width: 400px; height: 400px; padding-left: 50px;">
          </div>
        </div>
      </div>

      <div class=" suspension vipadd">
        <div class="home-title">刚刚加入的会员</div>

        <div class="viplist" v-for="item in data.recvip" :key="item">
          <div class="divimg">
            <img class="new-user-avatar" src="@/assets/logo.svg">
            <div class="user-base">
              <div class="user-name">
                {{ item.name }}
              </div>
              <div class="user-time">
                {{ item.time }}钟前加入
              </div>
            </div>
            <el-icon style="font-size: 18px; color: rgb(133, 149, 244);left: 20px;">
              <ArrowRight />
            </el-icon>

          </div>
        </div>

      </div>


    </div>

    <!-- 会员数据图表部分 -->
    <div class=" char ">
      <div class="chart-section suspension">
        <div style="height: 30px;border-bottom:1px solid #eee ;text-align: center;font-size: 18px;">会员数量统计</div>
        <div ref="chartRef" class="  animate__animated animate__zoomIn " style="width: 100%; height: 400px"></div>
      </div>
      <div class="customer suspension">
        <div style="height: 30px;border-bottom:1px solid #eee ;text-align: center;font-size: 18px;">
          客户跟进进度
        </div>
        <div class="cus_text" v-for="item in data.cusdata" :key="item">
          <div class="cusimg">
            <img class="new-user-avatar" src="@/assets/logo.svg">
            <div class="cusbase">
              <div class="cusname">
                <div>
                  {{ item.name }}
                </div>
                <div class="resbility">
                  负责人：<el-tag size="small" type="success">{{ item.responsibility }}</el-tag>
                </div>
              </div>
              <div style="font-size: 12px;color: brown; padding-top: 5px;">
                下次联系时间: {{ item.nexttime }}
              </div>
              <div class="cus_record">
                <el-progress :indeterminate="true" :percentage="item.success" />
              </div>
              <div>
              </div>
            </div>

          </div>

        </div>

      </div>
    </div>

  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue';
import { ArrowRight } from '@element-plus/icons-vue'
import * as echarts from 'echarts';
import type count_Dto from '@/Dto/Request/count/count_Dto';
import { GetcustomerCount, GetPackCount, GetTypeVipCount, GetWeekVipCount, RecentVip, TodayPrice, TodayVipCount, TotalPrice, VipTotal } from '@/api/count';
import Api_Code from '@/Dto/Response/Api_code';

import { closeloading, startloading } from '@/utils/loading';


// 会员数据图表的 DOM 引用
const chartRef = ref<HTMLElement | null>(null);
const vipchar = ref<HTMLElement | null>(null);
const packchar = ref<HTMLElement | null>(null);

const data = reactive<count_Dto>({
  vipdata: [],
  cusdata: [],
  vipcount: [],
  packcount: [],
  recvip: [],
  request: {
    totalprice: 0,
    todayprice: 0,
    todayvip: 0,
    vipcount: 0
  }
})




const methods = {
  async bind() {
    //获取会员总数
    const viptotal = await VipTotal()
    if (viptotal.code === Api_Code.ok) {
      data.request.vipcount = viptotal.data
    }
    //获取今日新增会员的人数
    const todayvip = await TodayVipCount()
    if (todayvip.code === Api_Code.ok) {
      data.request.todayvip = todayvip.data
    }
    //获取今日的销售额
    const todayprice = await TodayPrice()
    if (todayprice.code === Api_Code.ok) {
      data.request.todayprice = todayprice.data
    }
    //获取总销售额
    const Totalprice = await TotalPrice()
    if (Totalprice.code === Api_Code.ok) {
      data.request.totalprice = Totalprice.data
    }

    //获取最近一周会员的增长
    const vipres = await GetWeekVipCount()
    if (vipres.code === Api_Code.ok) {
      data.vipdata = vipres.data
    
    }
    //获取套餐销量
    const packcount = await GetPackCount()
    if (packcount.code === Api_Code.ok) {
      data.packcount = packcount.data
    }

    //获取 刚刚加入的会员
    const RecVip = await RecentVip()
    if (RecVip.code === Api_Code.ok) {
      data.recvip = RecVip.data

    }

    //获取客户跟进
    const res = await GetcustomerCount()
    if (res.code === Api_Code.ok) {
      data.cusdata = res.data
    }

    //获取各个会员类型人数
    const vipcount = await GetTypeVipCount()
    if (vipcount.code === Api_Code.ok) {
      data.vipcount = vipcount.data
    
    }


  },

  //绘制 套餐图表
  packEach() {
    if (packchar.value) {
      const pack = echarts.init(packchar.value);
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '套餐销量',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            padAngle: 5,
            itemStyle: {
              borderRadius: 10
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: data.packcount
          }
        ]
      };
      option && pack.setOption(option);
    }
  },
  //绘制会员增长图表
  drawEach() {
    if (vipchar.value) {
      const vip = echarts.init(vipchar.value);
      const option = {
        xAxis: {
          type: 'category',
          data: data.vipdata.map((d: any) => d.dayOfWeek)
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: data.vipdata.map((d: any) => d.count),
            type: 'bar'
          }
        ]
      };

      vip.setOption(option);

    }
  },

  // 绘制会员数据统计图表
  drawMemberChart() {
    if (chartRef.value) {
      const chart = echarts.init(chartRef.value);
      const option = {
        xAxis: {
          type: 'category',
          data: data.vipcount.map((d: any) => d.name)
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: data.vipcount.map((d: any) => d.count),
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      };

      chart.setOption(option);
    }
  }
}

onMounted(async () => {
  await methods.bind()
  methods.drawEach();
  methods.packEach();
  methods.drawMemberChart();
});
</script>

<style scoped>
.user-base {
  margin-left: 10px;
  color: #2c3f5d;
}

.cusbase {
  margin-left: 10px;
  color: #2c3f5d;
}

.user-name {
  font-size: 15px;
}

.cusname {
  font-size: 15px;
  display: flex;

}

.resbility {
  position: relative;
  left: 130px;
  font-size: 12px;
  color: rgb(98, 96, 96);
}

.user-time {
  font-size: 13px;

}

.cus_record {
  width: 280px;
  padding-top: 10px;
}

.viplist {
  width: 280px;
  height: 110px;
  border: 1px solid #eee;
  background: #ffffff;
  margin: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.cus_text {
  width: 390px;
  height: 120px;
  border: 1px solid #eee;
  background: #ffffff;
  margin: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.divimg {
  display: flex;
  align-items: center;
  padding: 20px;
  margin: 10px 15px;
  box-shadow: 0 0 30px #523f690d;
  background-color: var(--ba-bg-color-overlay);
}

.cusimg {
  display: flex;
  align-items: center;
  padding: 20px;
  margin: 10px 15px;
  box-shadow: 0 0 30px #523f690d;
  background-color: var(--ba-bg-color-overlay);
}

.new-user-avatar {
  height: 48px;
  width: 48px;
  border-radius: 50%;
}

.home-title {
  font-size: 16px;
  text-align: center;
  border-bottom: 1px solid #eee;
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-weight: 100;
}

.home-echarts {
  width: 400px;
}

.content-left {
  width: 450px;
  height: 400px;
  background: #ffffff;
  border: 1px solid #eee;
  border-radius: 8px;

}

.vipadd {
  background: #ffffff;
  border: 1px solid #eee;
  border-radius: 8px;
  width: 300px;
  height: 400px;
}

.home-content {
  width: 100%;

  display: flex;
}

.home-page {
  padding: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 8px;

}

.admin {
  margin-bottom: 20px;
}




.small-panel {
  background-color: #e9edf2;
  border-radius: var(--el-border-radius-base);
  padding: 25px;
  margin-bottom: 20px;
}

.small-panel .small-panel-title {
  color: #92969a;
  font-size: 15px;
}

.small-panel .small-panel-content {
  display: flex;
  align-items: flex-end;
  margin-top: 20px;
  color: #2c3f5d;
}

.small-panel .small-panel-content {
  display: flex;
  align-items: flex-end;
  margin-top: 20px;
  color: #2c3f5d;
}

.content {
  width: 25%;
}

.char {
  display: flex;
  margin-top: 30px;
  width: 100%;
  height: 100%;
}

.customer {
  flex: 1;
  margin-left: 20px;
  border-radius: 8px;
  background: #ffffff;
}

.chart-section {
  width: 850px;
  border-radius: 8px;
  background: #ffffff;
}

.admin-header {
  width: 85%;
  height: 130px;
  border: 1px solid #eee;
  background: #0c2551;
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 15px 20px !important;
  box-shadow: 0 0 30px #523f690d;

}

.admin_img {
  width: 180px;
  height: 130px;
  border: 1px solid #eee;
  background: #e1eaf9;
  box-shadow: 0 0 30px #523f690d;
}

.admin-header .welcome-img {
  height: 120px;
  margin-right: 200px;
  user-select: none;
}

.admin-header .welcome-title {
  font-size: 1.5rem;
  line-height: 30px;
  color: #ffffff;
  /* color: var(--ba-color-primary-light); */
}

.suspension {
  transition: all 0.3s ease;
}

.suspension:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 14px 24px #0003;
}
</style>